<template>
  <div style="border: 1px solid #ccc">
    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" />
    <Editor
      style="height: 500px; overflow-y: hidden"
      v-model="valueHtml"
      :defaultConfig="editorConfig"
      :mode="mode"
      @onCreated="handleCreated"
      @onChange="handleChange"
    />
  </div>
</template>

<script setup lang="ts">
  import '@wangeditor/editor/dist/css/style.css' // 引入 css
  import { onBeforeUnmount, ref, shallowRef, watch } from 'vue'
  // @ts-ignore
  import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

  interface IPops {
    modelValue: string
  }
  const $props = withDefaults(defineProps<IPops>(), {})
  const $emits = defineEmits(['update:modelValue'])
  // 编辑器实例，必须用 shallowRef
  const editorRef = shallowRef()
  // mode: 'default', // 或 'simple'
  const mode = ref<string>('default')

  // 内容 HTML
  const valueHtml = ref<string>()
  watch(
    () => $props.modelValue,
    (newVal) => {
      valueHtml.value = newVal
    }
  )

  const toolbarConfig = {}
  const editorConfig = { placeholder: '请输入内容...' }

  // 组件销毁时，也及时销毁编辑器
  onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
  })

  const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
  }

  const handleChange = (editor: any) => {
    $emits('update:modelValue', editor.getHtml())
  }
</script>

<style lang="scss" scoped></style>
